/* Style the Image Used to Trigger the Modal */
   
   #image-viewer img {
       border-radius: 5px;
       transition: 0.3s;
   }
   
   #image-viewer img:hover {
       opacity: 0.7;
   }
   /* The Modal (background) */
   
   #image-viewer {
       display: none;
       position: fixed;
       z-index: 9999;
       left: 0;
       top: 0;
       width: 100%;
       height: 100%;
       overflow: auto;
       background-color: rgb(0, 0, 0);
       background-color: rgba(0, 0, 0, 0.9);
   }
   
   .modal-content {
       margin: auto;
       display: block;
       width: 80%;
       height: 80%;
       object-fit: contain;
   }
   
   .modal-content {
       animation-name: zoom;
       animation-duration: 0.6s;
   }
   
   @keyframes zoom {
       from {
           transform: scale(0)
       }
       to {
           transform: scale(1)
       }
   }
   
   #image-viewer .close {
       position: absolute;
       top: 15px;
       right: 35px;
       color: #f1f1f1;
       font-size: 40px;
       font-weight: bold;
       transition: 0.3s;
       z-index: 999999999;
   }
   
   #image-viewer .close:hover,
   #image-viewer .close:focus {
       color: #bbb;
       text-decoration: none;
       cursor: pointer;
   }
   
   @media only screen and (max-width: 700px) {
       .modal-content {
           width: 100%;
       }
   }
   
   .full-center {
       display: flex;
       justify-content: center;
       align-items: center;
       width: 100%;
       height: 100%;
       position: absolute;
       top: 0;
   }